<!-- pages/cate/cate.vue -->
<template>
  <view class="cate" v-if="list.length>0">
    <!-- ref可以获取组件实例，但不能获取dom -->
    <view id="search">
      <my-search @click="goSearch"></my-search>
    </view>
    <!-- 内容区域 -->
    <view class="content">
      <scroll-view class="left" scroll-y="true" :style="{height:`${wh}px`}">
        <view :class="{active:currIndex===index}" class="item" v-for="(item, index) in list" :key="index"
          @click="leftClick(index)">
          {{item.cat_name}}
        </view>
      </scroll-view>
      <scroll-view class="right" scroll-y="true" :style="{height:`${wh}px`}" :scroll-top="scrollTop">
        <view class="item" v-for="(item, index) in list[currIndex].children" :key="index">
          <view class="title">
            /{{item.cat_name}}/
          </view>
          <!-- 三级分类 -->
          <view class="subbox">
            <view class="subitem" v-for="(i, v) in item.children" :key="v" @tap="toList(i.cat_name)">
              <image :src="i.cat_icon" mode="widthFix"></image>
              <text>{{i.cat_name}}</text>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>


<script>
  import myMixin from '@/mixins/myMixin.js'
  export default {
    mixins: [myMixin],
    data() {
      return {
        wh: 0,
        currIndex: 0,
        list: [],
        scrollTop: 0
      };
    },
    onLoad() {
      this.getHeight()
      this.getData()
    },
    methods: {
      // 切换分类
      leftClick(index) {
        this.currIndex = index
        // this.scrollTop = Math.random()
        this.scrollTop = 1 - this.scrollTop
      },
      // 获取高度
      getHeight() {
        const res = uni.getSystemInfoSync()
        this.wh = res.windowHeight - 55
        // const query = uni.createSelectorQuery().in(this);
        // query.select('#search').boundingClientRect(data => {
        //   // console.log("得到布局位置信息" + JSON.stringify(data));
        //   // console.log("节点离页面顶部的距离为" + data.top);
        //   this.wh = res.windowHeight - data.height
        //   // console.log('系统信息', res);
        // }).exec();






      },
      async getData() {
        const {
          message
        } = await uni.$http.get('/categories')
        this.list = message
        console.log('分类数据', message);
      },
      // 跳转至列表页
      toList(name) {
        uni.navigateTo({
          url: '/pages/list/list?key=' + name
        })
      },
      // 跳转至搜索页
      goSearch() {
        uni.navigateTo({
          url: '/pages/search/search'
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .cate {
    .content {
      display: flex;
      font-size: 12px;

      .left {
        width: 200rpx;

        .item {
          background-color: #f7f7f7;
          text-align: center;
          height: 100rpx;
          line-height: 100rpx;

          &.active {
            background-color: #fff;
            position: relative;

            &::before {
              content: '';
              width: 4rpx;
              height: 50rpx;
              background-color: #c00000;
              position: absolute;
              top: 50%;
              left: 0;
              transform: translateY(-50%);
            }
          }
        }
      }
    }
  }

  .right {
    .item {
      font-weight: 700;
      text-align: center;
      line-height: 100rpx;

      .subbox {
        display: flex;
        flex-wrap: wrap;

        .subitem {
          display: flex;
          flex-direction: column;
          align-items: center;
          width: 33.333%;

          image {
            width: 60%;
          }
        }
      }
    }
  }
</style>